<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>立方体</title>
  <style>
	*{padding:0;margin:0;}
	.wrapper {
		width: 500px;
	}
	.cube {
		font-size: 32px;
		width: 100px;
		margin: 50px auto;
         transform-style:preserve-3d;
		-webkit-transform-style:preserve-3d;
		-moz-transform-style:preserve-3d;
		-ms-transform-style:preserve-3d;
		-o-transform-style:preserve-3d;
		
		
		transform: rotateX(-40deg) rotateY(32deg);
		-webkit-transform:rotateX(-40deg) rotateY(32deg);
		-moz-transform:rotateX(-40deg) rotateY(32deg);
		-ms-transform:rotateX(-40deg) rotateY(32deg);
		-o-transform:rotateX(-40deg) rotateY(32deg);
	}
	.side {
		position: absolute;
		width: 100px;
		height: 100px;
		background: rgba(255, 99, 71, 0.6);
		border: 1px solid rgba(0, 0, 0, 0.5);
		color: white;
		text-align: center;
		line-height: 100px;
	}
	.front {
		transform: translateZ(50px);
		-webkit-transform: translateZ(50px);
		-moz-transform:translateZ(50px);
		-ms-transform: translateZ(50px);
		-o-transform: translateZ(50px);
		
	}
	.top {
		transform: rotateX(90deg) translateZ(50px);
		-webkit-transform: rotateX(90deg) translateZ(50px);
		-moz-transform:rotateX(90deg) translateZ(50px);
		-ms-transform: rotateX(90deg) translateZ(50px);
		-o-transform: rotateX(90deg) translateZ(50px);
		
	}
	.right {
		transform: rotateY(90deg) translateZ(50px);
		-webkit-transform: rotateY(90deg) translateZ(50px);
		-moz-transform:rotateY(90deg) translateZ(50px);
		-ms-transform: rotateY(90deg) translateZ(50px);
		-o-transform: rotateY(90deg) translateZ(50px);
		
	}
	.left {
		transform: rotateY(-90deg) translateZ(50px);
		-webkit-transform: rotateY(-90deg) translateZ(50px);
		-moz-transform:rotateY(-90deg) translateZ(50px);
		-ms-transform: rotateY(-90deg) translateZ(50px);
		-o-transform: rotateY(-90deg) translateZ(50px);
		
	}
	.bottom {
		transform: rotateX(-90deg) translateZ(50px);
		-webkit-transform: rotateX(-90deg) translateZ(50px);
		-moz-transform:rotateX(-90deg) translateZ(50px);
		-ms-transform: rotateX(-90deg) translateZ(50px);
		-o-transform: rotateX(-90deg) translateZ(50px);
		
	}

	.back {
		transform: rotateY(-180deg) translateZ(50px);
		-webkit-transform: rotateY(-180deg) translateZ(50px);
		-moz-transform:rotateY(-180deg) translateZ(50px);
		-ms-transform: rotateY(-180deg) translateZ(50px);
		-o-transform: rotateY(-180deg) translateZ(50px);
		
	}
	.w1 {
		perspective: 1000px;
	}
  </style>
 </head>
 <body>
	<div class="wrapper w1">
		<div class="cube">
			<div class="side  front">1</div>
			<div class="side   back">6</div>
			<div class="side  right">4</div>
			<div class="side   left">3</div>
			<div class="side    top">5</div>
			<div class="side bottom">2</div>
		</div>
	</div>
 </body>
</html>
